<!-- 种群健康证明 -->
<template>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择企业">
            <el-select filterable clearable v-model="formInline.companyId">
            <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="检测机构">
            <el-input v-model="formInline.detectionInstitution" placeholder="请输入检测机构" clearable />
        </el-form-item>
        <el-form-item label="送检日期">
            <el-input v-model="formInline.detectionDate" placeholder="请选择送检日期" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="Search">查询</el-button>
            <el-button type="success" icon="Plus" @click="isShowAdd = true">新增</el-button>
            <el-button icon="Download">导出</el-button>
        </el-form-item>
    </el-form>
    
    <!-- 表格 -->
    <el-table :data="tableData" stripe border style="width: 100%;">
        <el-table-column label="序号"  width="80px" type="index" />
        <el-table-column prop="name" label="送检日期" />
        <el-table-column prop="name" label="检测机构" />
        <el-table-column prop="name" label="报告日期" />
        <el-table-column prop="name" label="检测项目" />
        <el-table-column prop="name" label="结果" />
        <el-table-column prop="name" label="操作" width="200">
            <el-button type="primary" icon="Edit" size="small">编辑</el-button>
            <el-button type="info" icon="Download" size="small">下载报告</el-button>
        </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <add :isShowAdd="isShowAdd" @closeAddDrawer="closeAddDrawer"></add>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqGetCompanyNameList } from '@/api/company'
import add from './add/index.vue'

// 新增-弹窗的显示与隐藏
let isShowAdd = ref(false)

// 关闭新增弹窗
const closeAddDrawer = (val) => {
    isShowAdd.value = val
}

// 表单数据收集
const formInline = reactive({
    companyId: '', // 企业id
    detectionInstitution: '', // 检测机构
    detectionDate: '', // 检测日期
})

// 表格数据
let tableData = ref([
    { name: 0 },
    { name: 0 },
    { name: 0 }
])

// 获取企业下拉列表数据
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 挂载完毕
onMounted(() => {
    getCompanyNameList()
})
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>